<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>易见股份舆情系统V1.0</title>
    <link href="/favicon.ico" rel="icon" type="image/x-icon"/>
    <meta name="csrf-token" content="{{ csrf_token() }}">

    {{scripts('resources/views/pc/js/jquery.js', 'pc')}}
    {{scripts('resources/views/pc/js/moment.js', 'pc')}}
    {{scripts('resources/views/pc/js/daterangepicker.js', 'pc')}}

    {{sass('resources/views/pc/style/daterangepicker.css', 'pc')}}
    {{sass('resources/views/pc/style/style.css', 'pc')}}
</head>
<body>
<div class="preloader">
    <div class="spinner"></div>
</div>

<div class="layout">

    <div class="topbar">
        <img src="/static/logo.png"/>
        <div id="show-stock">
            今日易见3为<em class="date"></em>，
            收盘价<em class="price">-</em>元/股，
            涨跌幅<em class="change">-%</em>，
            市值<em class="market">-</em>。
        </div>
        <div>
            <span>数据总量：<i>{{$totalNumber}}</i></span>
            <span>今日：<i>{{$todayNumber}}</i></span>
            <span>昨日：<i>{{$yedayNumber}}</i></span>
        </div>
    </div>

    <div class="container">
        <ul class="source">
            <li class="on"><a href="#">全部来源</a></li>
            @foreach($sites as $_site)
                <li data-site_id="{{$_site['id']}}"><a href="#">{{$_site['name']}}</a></li>
            @endforeach
        </ul>
        <div class="right">
            <div class="search">
                <input type="hidden" value="0" id="show_page">
                <input type="hidden" value="0" id="show_site_id">
                <input type="hidden" value="" id="demo_date_start">
                <input type="hidden" value="" id="demo_date_end">
                <div class="time">
                    <input type="text" class="datepicker" style="width: 200px;" placeholder="开始时间 ~ 结束时间"
                           autocomplete="off" id="showDate">
                    <span type="button" role="button" class="search-btn" onclick="search();">
                        <img src="/static/pc/img/search.png"/>
                    </span>
                </div>
            <!--<a href="#" onclick="searchToday();">{{$yesdate}}舆情日报</a>-->
                <a href="/home/down-word/{{$yesdate}}" target="_blank">{{$yesdate}}舆情日报</a>
            </div>

            <!-- 展示内容 -->
            <div class="con">


            </div>

            <div class="page" id="pagination">
                <a href="" class="on page-button">1</a>
                <a href="" class="page-button">2</a>
                <a href="" class="page-button">3</a>
                <a href="" class="page-button">4</a>
                <span>共计：1520</span>
            </div>

            <div class="footer">
                @2024 易见股份 版权所有
                <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备19147771号-1</a>
            </div>

        </div>
    </div>


</div>
<script>
    $(function () {
        // preloader
        $(".preloader").fadeOut();
    });

    $(document).ready(function () {
        $(".datepicker").on("focus", '', function () {
            var today = new Date();
            var year = today.getFullYear();
            var month = today.getMonth() + 1;
            var date = today.getDate();
            var orderDate = year + '-' + month + "-" + date;
            $(this).daterangepicker({
                    minDate: "2021-01-01",
                    maxDate: orderDate,
                    startDate: moment(),
                    endDate: moment(),
                    "locale": {
                        format: 'YYYY-MM-DD',
                        separator: '~',
                        applyLabel: "应用",
                        cancelLabel: "取消",
                        resetLabel: "重置",
                    }
                },
                function (start, end, label) {
                    console.log(this.startDate.format(this.locale.format))
                    console.log(this.endDate.format(this.locale.format))
                    $('#demo_date_start').val(this.startDate.format(this.locale.format));
                    $('#demo_date_end').val(this.endDate.format(this.locale.format));
                });
        });

        $(".s-timePicker").on("focus", function () {
            var timeRangeDom = $(this).parent('.s-timeRange');
            var timePickerDom = $(this);
            datePicker(
                moment().subtract(0, 'month').startOf('month'),
                moment().subtract(0, 'month').endOf('month'),
                timeRangeDom,
                timePickerDom,
                'YYYY-MM',
                false,
                {
                    '本月': [moment().startOf('month'), moment().endOf('month')],
                    '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    '近3月': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    '近1年': [moment().subtract(12, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                true,
                true
            );
        })
    });

    var totalPages = 0;
    var is_trade = true;
    // 选中栏目
    $('.container .source li').on('click', function () {
        // 给当前选中的li添加一个选中的样式，除了点击当前的这个样式其他的删除样式
        $(this).addClass('on').siblings().removeClass('on');

        let site_id = $(this).data('site_id');
        $('#show_page').val(0);  // 重新开始搜索
        $('#show_site_id').val(site_id);  // 重新开始搜索
        $('#demo_date_start').val("");
        $('#demo_date_end').val("");
        $('#showDate').val("");

        // 第一种写法
        // $('.boxs > div').hide().eq($('.tabs li').index(this)).show();
        // 第二种写法
        // siblings:除自己以外
        // 当前指向的上级父元素的下一个子元素的索引下标出现，让其他的消失
        //$(this).parent().next().children().eq($(this).index()).css('display', 'block').siblings().css('display', 'none');

        // 加载更多
        addmore();
        return false;
    })


    // 加载更多
    addmore()
    getStock()
    @if(!$is_word)
    makeWord()
    @endif
    var int_get = setInterval(function () {
        if (is_trade) {
            getStock()
        } else {
            //清除计时器
            console.log('关闭：股票信息')
            clearInterval(int_get)
        }
    }, 60000);


    // 执行搜索
    function search() {
        $('#show_page').val(0);  // 重新开始搜索
        addmore()
    }

    // 执行搜索 今天
    function searchToday() {
        $('#show_page').val(0);  // 重新开始搜索

        $('#demo_date_start').val("{{date('Y-m-d')}}");
        $('#demo_date_end').val("{{date('Y-m-d')}}");
        $('#showDate').val("{{date('Y-m-d')}} ~ {{date('Y-m-d')}}");
        $('#show_site_id').val(0);

        addmore()
        return false;
    }

    // 加载更多
    function addmore() {
        $(".preloader").fadeIn().fadeOut();
        //var rows = $('#show_rows').val();
        var page = parseInt($('#show_page').val()) + parseInt(1);
        var rows = 10;
        let site_id = $('#show_site_id').val();
        let date_start = $('#demo_date_start').val();
        let date_end = $('#demo_date_end').val();

        console.log('获取数据：当前页：', page)
        // 显示列表
        $.ajax({
            type: 'post',
            url: '/home/on-lists',
            data: {page: page, size: rows, site_id: site_id, start_date: date_start, end_date: date_end},
            //contentType: 'application/json',
            contentType: 'application/x-www-form-urlencoded',
            // dataType : 'json',
            // contentType: 'application/x-www-form-urlencoded',
            // 这个方法在请求发送前调用，可以用来做表单校验、用来做请求等待动画的调用
            /*beforeSend: function () {
                // 返回false是取消发送
                return false
            },*/
            withCredentials: true,
            // 自定义 header
            beforeSend: function (request) {
                //request.setRequestHeader("Terminal","android");
                //request.setRequestHeader("Token","");
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            // 会自动帮我们把返回的数据根据响应头设置的类型进行转换好（也就是会自动转成json对象）
            success: function (res) {
                //console.log('返回结果', res)
                //$(".right .con").append(res)
                $(".right .con").html(res)

                // 更新当前页面
                renderPagination(page)
                highShowCurrentPage(page)
            },
            // xhr是ajax对象
            error: function (xhr) {
            }
        });

        // 制作翻页
        if (page == 1) {
            $.ajax({
                type: 'post',
                url: '/home/on-lists',
                data: {
                    page: page,
                    is_page: 1,
                    size: rows,
                    site_id: site_id,
                    start_date: date_start,
                    end_date: date_end
                },
                //contentType: 'application/json',
                contentType: 'application/x-www-form-urlencoded',
                withCredentials: true,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                // 会自动帮我们把返回的数据根据响应头设置的类型进行转换好（也就是会自动转成json对象）
                success: function (res) {
                    if (res.code == 200) {
                        totalPages = Math.ceil(res.data.total / rows);
                        renderPagination(page)
                        highShowCurrentPage(page)
                    }
                },
                // xhr是ajax对象
                error: function (xhr) {
                }
            });
        }
    }

    // 生成word
    function makeWord() {
        $.ajax({
            type: 'post',
            url: '/home/make-word',
            data: {date: '{{$yesdate}}'},
            //contentType: 'application/json',
            contentType: 'application/x-www-form-urlencoded',
            // dataType : 'json',
            // contentType: 'application/x-www-form-urlencoded',
            // 这个方法在请求发送前调用，可以用来做表单校验、用来做请求等待动画的调用
            /*beforeSend: function () {
                // 返回false是取消发送
                return false
            },*/
            withCredentials: true,
            // 自定义 header
            beforeSend: function (request) {
                //request.setRequestHeader("Terminal","android");
                //request.setRequestHeader("Token","");
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            // 会自动帮我们把返回的数据根据响应头设置的类型进行转换好（也就是会自动转成json对象）
            success: function (res) {
                console.log('生成word结果', res)
            },
            // xhr是ajax对象
            error: function (xhr) {
            }
        });
    }

    // 获取股票消息
    function getStock() {
        $.ajax({
            type: 'get',
            url: '/home/stock',
            data: {},
            //contentType: 'application/json',
            contentType: 'application/x-www-form-urlencoded',
            // dataType : 'jsonp',
            // contentType: 'application/x-www-form-urlencoded',
            // 这个方法在请求发送前调用，可以用来做表单校验、用来做请求等待动画的调用
            /*beforeSend: function () {
                // 返回false是取消发送
                return false
            },*/
            withCredentials: true,
            // 自定义 header
            beforeSend: function (request) {
                //request.setRequestHeader("Terminal","android");
                //request.setRequestHeader("Token","");
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            // 会自动帮我们把返回的数据根据响应头设置的类型进行转换好（也就是会自动转成json对象）
            success: function (res) {
                console.log('获取股票结果', res.data)
                if (res.data) {
                    let s_data = res.data
                    if (s_data.Close && s_data.MarketValue) {
                        $("#show-stock .price").text(s_data.Close)
                        $("#show-stock .market").text((s_data.MarketValue / 100000000).toFixed(2) + '亿')
                        //$("#show-stock .market").text(s_data.MarketValue)
                        if ((s_data.Close === '-') && (s_data.Change === '-')) {
                            is_trade = false
                            $("#show-stock .date").text('非交易日')
                            $("#show-stock .change").text('-%')
                        } else {
                            $("#show-stock .date").text('交易日')
                            $("#show-stock .change").text((s_data.ChangePercent > 0 ? '+' : '') + s_data.ChangePercent + '%')
                        }
                    } else {
                        // 如果没有返回数据
                        is_trade = false
                    }
                }
            },
            // xhr是ajax对象
            error: function (xhr) {
            }
        });
    }

    // 渲染分页按钮
    function renderPagination(from) {
        $('#pagination').html(''); // 清空分页容器

        if (totalPages > 10) {
            // 首页
            if (from > 1) {
                $('#pagination').append('<a data-page="1">1<<</a> ');
            }
            // 中间显示8页
            let min = from - 4 > 1 ? from - 4 : 1;
            let max = from - 4 > 1 ? from + 4 : 8;
            if (max > totalPages) {
                max = totalPages;
                min = totalPages - 8;
            }

            for (let pageii = min; pageii <= max; pageii++) {
                $('#pagination').append('<a data-page="' + pageii + '">' + pageii + '</a> ');
            }

            // 最后一页
            if (from < totalPages) {
                $('#pagination').append('<a data-page="' + totalPages + '">>>' + totalPages + '</a> ');
            }
        } else {
            for (let pageii = 1; pageii <= totalPages; pageii++) {
                $('#pagination').append('<a data-page="' + pageii + '">' + pageii + '</a> ');
            }
        }

        // 绑定点击事件
        $('#pagination a').on('click', function () {
            $('#show_page').val(parseInt($(this).data('page')) - 1); // 因为获取数据的时候会+1，所以这里-1对应
            addmore()
            return false;
        });
    }

    // 高亮显示当前页面
    function highShowCurrentPage(currentPage) {
        $('#pagination a').removeClass('on');
        //$('.page-button:eq(' + (currentPage - 1) + ')').addClass('on');
        $('#pagination a').each(function () {
            if ($(this).data('page') == currentPage) {
                $(this).addClass('on');
            }
        })
    }

</script>
</body>
</html>
